import React, { useState } from 'react'
import Navbar from '../../compoents/Navbar'
import style from './index.module.css'
import { useNavigate, useLocation } from 'react-router-dom'
import { Button, Modal, Space, Toast, Divider } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const [reason, setReason] = useState('')
  const { state } = useLocation()
  console.log('state',state);
  

  const handleReasonChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setReason(e.target.value)
  }

  return (
    <div className={style.container}>
      <Navbar showBack onBack={() => navigate(-1)} title='开单确认' />
      
      <div className={style.openTrueBox}>
        {/* 申请信息部分 */}
        <div className={style.section}>
          <div className={style.sectionTitle}>申请信息</div>
          
          <div className={style.infoItem}>
            <div className={style.infoLabel}>申请医院</div>
            <div className={style.infoValue}>四川省保健院北苑</div>
          </div>
          
          <div className={style.infoItem}>
            <div className={style.infoLabel}>申请人</div>
            <div className={style.infoValue}>
              王小柯
              <span className={style.arrow}>{'>'}</span>
            </div>
          </div>
        </div>

        {/* 申请原因部分 */}
        <div className={style.section}>
          <div className={style.sectionTitle}>申请原因*</div>
          
          <div className={style.textareaContainer}>
            <textarea
              className={style.textarea}
              placeholder="请输入项目申请原因用于医生更准确判断,不少于20字"
              value={reason}
              onChange={handleReasonChange}
              maxLength={200}
            />
            <div className={style.charCount}>
              {reason.length}/200
            </div>
          </div>
        </div>

        {/* 申请项目部分 */}
        <div className={style.section}>
          <div className={style.sectionTitle}>申请项目</div>
          
          <div className={style.itemsList}>
            {/* 药品项目 */}
            <div className={style.itemCard}>
              <div className={style.itemIcon}>
                <div className={style.medicineIcon}>💊</div>
              </div>

  
              <div className={style.itemContent}>
                <div className={style.itemName}>新冠预防中药 (正常人群)</div>
                <div className={style.itemQuantity}>数量: 1剂</div>
                <div className={style.itemTags}>
                  <span className={`${style.tag} ${style.prescription}`}>处方药</span>
                  <span className={`${style.tag} ${style.limit}`}>限购5剂</span>
                </div>
              </div>
              <div className={style.itemPrice}>¥ 11.80</div>
            </div>

            <div className={style.itemCard}>
              <div className={style.itemIcon}>
                <div className={style.medicineIcon}>💊</div>
              </div>
              <div className={style.itemContent}>
                <div className={style.itemName}>云南白药胶囊 0.5g*20片</div>
                <div className={style.itemQuantity}>数量: 1盒</div>
                <div className={style.itemTags}>
                  <span className={`${style.tag} ${style.prescription}`}>处方药</span>
                </div>
              </div>
              <div className={style.itemPrice}>¥ 10.08</div>
            </div>

            {/* 检查项目 */}
            <div className={style.itemCard}>
              <div className={style.itemIcon}>
                <div className={style.testIcon}>🔍</div>
              </div>
              <div className={style.itemContent}>
                <div className={style.itemName}>动态心电图</div>
                <div className={style.itemQuantity}>数量: 1次</div>
              </div>
              <div className={style.itemPrice}>¥ 150.00</div>
            </div>

            <div className={style.itemCard}>
              <div className={style.itemIcon}>
                <div className={style.testIcon}>🧪</div>
              </div>
              <div className={style.itemContent}>
                <div className={style.itemName}>血常规</div>
                <div className={style.itemQuantity}>数量: 1次</div>
              </div>
              <div className={style.itemPrice}>¥ 29.12</div>
            </div>
          </div>

          {/* 合计金额 */}
          <div className={style.totalAmount}>
            <span className={style.totalLabel}>合计:</span>
            <span className={style.totalPrice}>¥ 201.00</span>
          </div>
        </div>

        {/* 提交按钮 */}
        <div className={style.buttonContainer}>
            <button 
              className={`${style.submitButton} ${reason.length < 20 ? style.disabled : ''}`}
              disabled={reason.length < 20}   
              onClick={() => {
                Modal.alert({
                  content: <div>
                    <h4 style={{textAlign:'center'}}>申请原因</h4>
                    <p style={{margin:10}}>项目申请已提交，请耐心等待审核结果
                    ，可在开单记录中查询审核状态</p>
                  </div>,
                  confirmText: '去查看',
                  onConfirm: () => {
                    navigate('/OpenLength')
                  }
                })
              }}
              
          >
            确认申请
          </button>
        </div>

      
        
      </div>
    </div>
  )
}

export default Index
